<template>
	<div class="hot-product">
		<ul>
			<li v-for="(item,key) in list" :key="key" :class="{'one-pro':true,'two-pro':list.length>1}">
				<div class="image"><img :src="item.imageUrl" alt=""></div>
				<h3>{{item.title}}</h3>
				<p><span>&yen;{{item.price}}</span>起</p>
				<div class="upload">
					<span class="upload-1"><p :style="{width:item.showLoad+'%'}"></p></span>
					<span>{{item.showLoad}}%</span>
				</div>
        <a-button :href="item.href" type="primary" shape="round" size="large" style="height:30px;line-height: 30px;">立即购买</a-button>
			</li>
		</ul>
	</div>
</template>

<script>
	
	export default{
		props:{
			list:Array
		}
	}
</script>

<style lang="scss">
  .hot-product{
    ul{
      display: flex;
      li{
        margin: 20px;
        font-size: 28px;
        text-align:center;
        width: 50%;
        >.image{
          padding: 10%;
          img{
            width: 100%;
          }
        }
        h3{
          font-weight: bold;
        }
        >p{
          margin-top: 16px;
          font-weight: bold;
          color:#a6a6a6;
          span{
            color:red;
            font-size: 32px;
          }
        }
        .upload{
          text-align: center;
          height:66px;
          line-height: 66px;
          .upload-1{
            display: inline-block;
            margin-right: 6px;
            width:100px;
            height:10px;
            border:1px solid #e1e1e1;
            border-radius:5px;
            position: relative;
            p{
              position: absolute;
              top:0;
              border-radius:5px;
              height:10px;
              background-color: #ff0000;
            }
          }
        }
      }
    }
  }
</style>
